<template>
  <div class="">
    <div class="my-steps">
      <div class="steps">
        <template v-for="(mItem, mIndex) in pageNum">
          <div
            class="stepMain"
            :style="{
              'margin-top': mIndex > 0 ? '50px' : '0px',
              'justify-content': mIndex % 2 == 1 ? 'flex-end' : 'flex-start',
            }"
          >
            <template v-for="(item, index) in mStepsData[mIndex]">
              <div
                class="step"
                :style="{
                  'flex-basis': flexBasis,
                }"
              >
                <div
                  class="step-pane cursor-pointer"
                  :class="[getActiveClass(item)]"
                >
                  <div class="left">
                    <el-icon class="step-icon">
                      <el-icon-success-filled />
                    </el-icon>
                  </div>
                  <div class="right">
                    <div class="title">
                      {{ item.title }}
                    </div>
                    <div class="description" @click="nextStep()">
                      {{ item.value }}
                    </div>
                  </div>
                </div>
                <div
                  class="line"
                  :class="[
                    getLineClass(item, mStepsData[mIndex].length, mIndex),
                  ]"
                ></div>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  stepsData: {
    type: Array,
    default() {
      return [];
    },
  },
  active: {
    type: Number,
    default: 0,
  },
  //每行的数量
  rowCount: {
    type: Number,
    default: 4,
  },
});
const mStepsData = ref([]);
const pageNum = ref(0);
const flexBasis = ref("");
const activeNum = ref(0);

const nextStep = () => {
  if (activeNum.value + 1 > props.stepsData.length) {
    activeNum.value = 0;
  } else {
    activeNum.value++;
  }
};
// 初始化数据

const init = async () => {
  const stepsData = props.stepsData;
  const rowCount = props.rowCount;
  activeNum.value = props.active;

  if (stepsData && stepsData.length > 0) {
    pageNum.value = Math.ceil(stepsData.length / rowCount);

    flexBasis.value = parseFloat(100.0 / rowCount) + "%";

    let list = [];
    let index = 0;
    stepsData.forEach((item) => {
      item.myStepIndex = index;

      let colNum = (index % rowCount) + 1;
      item.colNum = colNum;

      if (mStepsData.value.length % 2 == 1) {
        //连接线的位置
        item.lineDirection = "left";
      } else {
        item.lineDirection = "right";
      }

      list.push(item);
      if (list.length >= rowCount) {
        if (mStepsData.value.length > 0 && mStepsData.value.length % 2 == 1) {
          list = list.reverse();
        }

        mStepsData.value.push(JSON.parse(JSON.stringify(list)));
        list = [];
      }

      index++;
    });
    if (list.length > 0) {
      if (mStepsData.value.length > 0 && mStepsData.value.length % 2 == 1) {
        list = list.reverse();
      }
      mStepsData.value.push(JSON.parse(JSON.stringify(list)));
    }
  }
};

onMounted(() => {
  init();
});

defineExpose({
  init,
});
const getActiveClass = computed(() => {
  return (item) => {
    return activeNum.value > item.myStepIndex
      ? "is-finish"
      : activeNum.value == item.myStepIndex
        ? "is-process"
        : "";
  };
});

const getLineClass = computed(() => {
  return (item, len, rowIndex) => {
    if (item.colNum == len) {
      if (rowIndex + 1 == pageNum.value) {
        //如果是最后一行，则不显示连接线
        return "none";
      }
      //最后一列
      return "bottom" + item.lineDirection;
    } else {
      return item.lineDirection;
    }
  };
});
</script>

<style scoped lang="scss">
.my-steps {
  display: flex;
  .steps {
    width: 100%;

    position: relative;

    .stepMain {
      display: flex;

      justify-content: center;

      .step {
        color: var(--color-text-primary);
        position: relative;
        .step-pane {
          position: relative;
          display: flex;
          border: 1px solid #b9abb2;
          width: 80%;
          padding: 10px 0;
          align-items: center;
          gap: 10px;
          background: white;
          z-index: 3;
          .left {
            height: 30px;
            display: flex;

            .step-icon {
              font-size: 30px;
            }
          }
          .right {
          }
        }

        .line {
          position: absolute;
          width: 100%;
          height: 3px;
          background: var(--color-text-primary);
          top: 50%;
          z-index: 2;

          &.left {
            right: 100%;
          }

          &.bottomright {
            /* transform: rotate(90deg); */
            width: 3px;
            height: 100%;
            top: 100%;
            left: 50%;
          }

          &.bottomleft {
            /* transform: rotate(90deg); */
            width: 3px;
            height: 100%;
            top: 100%;
            left: 10%;
          }

          &.none {
            width: 0px;
            height: 0px;
            display: none;
          }
        }

        .is-finish {
          color: var(--el-color-success);
          border-color: var(--el-color-success);

          & + .line {
            background: var(--el-color-success);
          }
        }

        .is-process {
          color: var(--el-color-success);
          border-color: var(--el-color-success);
          & + .line {
            background: var(--el-color-success);
          }
        }
      }
    }
  }
}
.title {
  font-weight: 600;
}
.description {
  height: 5.4rem;
}
</style>
